<script setup>
// 导入组件
import Son from './Son.vue'
import Son2 from './Son2.vue'
// 导入 Vue 内置函数
import {
    reactive,
    nextTick,
    ref
} from 'vue'


// 用于保存子组件传递过来的数据
let sonData = reactive({
    person: null
})

// 1. 父组件准备用于传递给子组件的方法
// 子组件通过该方法将数据传递给父组件
// 父组件先暂存数据，最后由父组件将数据给
// 子组件的兄弟组件，从而实现兄弟组件数据传递
function getSonData(data) {
    sonData.person = data
}
</script>

<template>
    <div class="father">
        <h3>父组件</h3>
        <p v-if="sonData.person">父组件接收到的数据：{{ sonData.person }}</p>
        <!-- 
            2. 父组件通过属性绑定的方式
            将方法传递给子组件
         -->
        <Son :getSonDataMethod="getSonData"></Son>
        <!-- 
            6. 父组件接收到数据后，
            将数据传递给子组件的兄弟组件
         -->
        <Son2 :data="sonData.person"></Son2>
    </div>
</template>

<style lang="scss" scoped>
.father {
    width: 300px;
    height: 450px;
    background-color: coral;
}
</style>